* {
  margin: 0;
  padding: 0;
}
body {
  background-color: rgb(243, 243, 243);
}
.box {
  width: 786px;
  height: 520px;
  margin: 0px auto;
  padding: 50px;
  /* padding-top: 0; */
  background-color: #fff;
}

.top .logo {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  display: block;
  background-image: url(https://account.xiaomi.com/static/res/8df71d6/account-static/respassport/acc-2014/img/milogo.png);
  margin-bottom: 40px;
}

.top h2 {
  color: #333;
  font-size: 30px;
  font-weight: normal;
  line-height: 1.5;
  text-align: center;
}

.con {
  width: 333px;
  margin: 0 auto;
  font-size: 14px;
  position: relative;
}

.con .con-top .ipt {
  width: 333px;
  height: 40px;
  cursor: pointer;
  margin: 5px 0 0 0;
}
.con .con-top .ipt > #xl {
  color: #ccc;
  text-align: center;
  line-height: 40px;
}
.con .con-top .ipt-b {
  width: 331px;
  height: 160px;
  overflow-y: auto;
  cursor: pointer;
  border: 1px solid #e8e8e8;
  border-top: none;
  display: none;
  position: absolute;
  z-index: 999;
}
.con .con-top .ipt-b > p {
  width: 330px;
  border-top: 1px solid #e8e8e8;
  line-height: 40px;
  text-indent: 17px;
  background-color: #fff;
}
.con .con-top span:first-child {
  display: block;
  width: 290px;
  height: 40px;
  float: left;
  border: 1px solid #e8e8e8;
  line-height: 40px;
  text-indent: 17px;
}

.con .con-top span:last-child {
  display: block;
  width: 40px;
  height: 40px;
  float: left;
  border: 1px solid #e8e8e8;
  border-left: none;
}

.con .con-top .wsp {
  color: #666;
  margin-bottom: 15px;
}

.con .con-bot p span {
  width: 68px;
  height: 40px;
  border: 1px solid #e8e8e8;
  display: block;
  text-align: center;
  line-height: 40px;
  float: left;
  border-right: none;
  cursor: pointer;
}

.con .con-bot p input {
  width: 252px;
  height: 40px;
  border: none;
  border: 1px solid #e8e8e8;
  float: left;
  outline: none;
  padding: 0 5px;
}

.con .con-bot p:nth-child(2) {
  margin: 5px 0;
  height: 40px;
}

.con .con-bot p:last-child {
  margin: 5px 0;
  height: 40px;
}

.con .con-bot .teshu {
  position: relative;
  margin-top: 10px;
}
.con .con-bot .teshu > #yj {
  position: absolute;
  width: 42px;
  color: #ccc;
  right: 0px;
  top: 0px;
  border: none;
  border-left: 1px solid #e8e8e8;
}
.con button {
  width: 330px;
  height: 42px;
  background: #ff6700;
  margin: 0 auto;
  text-align: center;
  line-height: 42px;
  margin-top: 20px;
  border: none;
  cursor: pointer;
  color: #fff;
  outline: none;
  background: linear-gradient(
    30deg,
    transparent 9%,
    rgb(255, 136, 0) 10% 95%,
    rgb(0, 255, 149) 95%
  );
}

.btm p {
  font-size: 14px;
  color: #666;
  text-align: center;
  cursor: pointer;
  width: 252px;
  margin: 0 auto;
  margin-top: 66px;
}

.btm p span {
  font-weight: 900;
  color: #000;
}

em {
  font-style: normal;
  color: #ff6700;
}

.anniu,
.anniu::after {
  width: 330px;
  height: 42px;
  text-align: center;
  /* font-size: 22px; */
  /* letter-spacing: 2px; 文字间距*/
  line-height: 80px;
  color: rgb(255, 251, 251);
  /* linear-gradient 线性渐变 */
  /* https://blog.csdn.net/qq_18661257/article/details/50640633?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162322373916780262552900%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162322373916780262552900&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-50640633.pc_search_result_before_js&utm_term=linear-gradient%28%29&spm=1018.2226.3001.4187 */
  background: linear-gradient(
    30deg,
    transparent 10%,
    rgb(255, 136, 0) 10% 95%,
    rgb(0, 255, 149) 95%
  );
  /* box-shadow 阴影 */
  box-shadow: 5px 0 0 rgb(0, 204, 255);
  /* cursor: pointer; 鼠标变成手型 */
  cursor: pointer;
  position: relative;
}
.anniu::after {
  content: "立即注册";
  position: absolute;
  top: 0;
  left: 0;
  /* 文本阴影 */
  text-shadow: -5px -2px 0 rgb(0, 183, 255), 5px 2px 0 rgb(0, 255, 115);
  visibility: hidden;
}
.anniu:hover::after {
  animation: san 1s;
  /* 设置动画每一帧的状态，这里是直接拿每一帧的结束状态 */
  animation-timing-function: steps(1, end);
}

/* 这里所做的切片的位置和数量是挺随机的，大家可以根据想达到的效果自行更改数值 */
@keyframes san {
  0% {
    /* 设定值有 4 个，分别代表上右下左，即是要向内缩小多少的意思 */
    clip-path: inset(20% -5px 60% 0);
    /* translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
    /* https://blog.csdn.net/qq_41161982/article/details/112243176?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162322628916780264019653%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162322628916780264019653&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-5-112243176.pc_search_result_before_js&utm_term=transform%3A+translate&spm=1018.2226.3001.4187 */
    transform: translate(-4px, 3px);
    visibility: visible;
  }
  10% {
    clip-path: inset(50% -5px 30% 0);
    transform: translate(4px, -3px);
  }
  20% {
    clip-path: inset(20% -5px 60% 0);
    transform: translate(3px, 0px);
  }
  30% {
    clip-path: inset(80% -5px 5% 0);
    transform: translate(-6px, 3px);
  }
  40% {
    clip-path: inset(0 -5px 80% 0);
    transform: translate(-2px, -1px);
  }
  50% {
    clip-path: inset(50% -5px 30% 0);
    transform: translate(-4px, -3px);
  }
  60% {
    clip-path: inset(80% -5px 5% 0);
    transform: translate(-5px, 3px);
  }
  70% {
    clip-path: inset(0 -5px 80% 0);
    transform: translate(1px, 4px);
  }
  80% {
    clip-path: inset(50% -5px 30% 0);
    transform: translate(3px, 3px);
  }
  90% {
    clip-path: inset(20% -5px 60% 0);
    transform: translate(4px, -3px);
  }
  100% {
    clip-path: inset(0 -5px 80% 0);
    transform: translate(1px, 3px);
  }
}
